<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Form | Semantic UI</title>

<meta name="description" content="A form displays a set of related user input fields in a structured way" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="form" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="active item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Form
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="active item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <link rel="stylesheet/less" type="text/css" href="/src/definitions/collections/form.less" />
<script src="/javascript/form.js"></script>



<div class="ui masthead vertical segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Form
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A form displays a set of related user input fields in a structured way
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/collections/form.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Form] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Form should do this%0A%0A**Result**%0AThe Form does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
      
      <div class="ui floating dropdown theme basic button" data-element="form" data-type="collection">
        <span class="text">4 Themes</span>
        <div class="menu transition hidden">
          
            <div class="item" data-value="Default" data-text="Default Theme">Default</div>
          
            <div class="item" data-value="Flat" data-text="Flat Theme">Flat</div>
          
            <div class="item" data-value="Chubby" data-text="Chubby Theme">Chubby</div>
          
            <div class="item" data-value="GitHub" data-text="GitHub Theme">GitHub</div>
          
        </div>
      </div>
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Form</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Form/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Form/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-form">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-form">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Form.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Form</h4>
    <p>A form</p>
    <div class="ui ignored warning message">
      <p>If you are looking for validation you should check out <a href="/behaviors/form.html">form behaviors</a>.</p>
    </div>
    <form class="ui form">
      <div class="field">
        <label>First Name</label>
        <input type="text" name="first-name" placeholder="First Name">
      </div>
      <div class="field">
        <label>Last Name</label>
        <input type="text" name="last-name" placeholder="Last Name">
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>I agree to the Terms and Conditions</label>
        </div>
      </div>
      <button class="ui button" type="submit">Submit</button>
    </form>
  </div>
  <div class="another example">
    <div class="ui ignored hidden divider"></div>
    <form class="ui form">
      <h4 class="ui dividing header">Shipping Information</h4>
      <div class="field">
        <label>Name</label>
        <div class="two fields">
          <div class="field">
            <input type="text" name="shipping[first-name]" placeholder="First Name">
          </div>
          <div class="field">
            <input type="text" name="shipping[last-name]" placeholder="Last Name">
          </div>
        </div>
      </div>
      <div class="field">
        <label>Billing Address</label>
        <div class="fields">
          <div class="twelve wide field">
            <input type="text" name="shipping[address]" placeholder="Street Address">
          </div>
          <div class="four wide field">
            <input type="text" name="shipping[address-2]" placeholder="Apt #">
          </div>
        </div>
      </div>
      <div class="two fields">
        <div class="field">
          <label>State</label>
          <select class="ui fluid dropdown">
            <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
          </select>
        </div>
        <div class="field">
          <label>Country</label>
          <div class="ui fluid search selection dropdown">
            <input type="hidden" name="country">
            <i class="dropdown icon"></i>
            <div class="default text">Select Country</div>
            <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>

          </div>
        </div>
      </div>
      <h4 class="ui dividing header">Billing Information</h4>
      <div class="field">
        <label>Card Type</label>
        <div class="ui selection dropdown">
          <input type="hidden" name="card[type]">
          <div class="default text">Type</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-value="visa">
              <i class="visa icon"></i>
              Visa
            </div>
            <div class="item" data-value="amex">
              <i class="amex icon"></i>
              American Express
            </div>
            <div class="item" data-value="discover">
              <i class="discover icon"></i>
              Discover
            </div>
          </div>
        </div>
      </div>
      <div class="fields">
        <div class="seven wide field">
          <label>Card Number</label>
          <input type="text" name="card[number]" maxlength="16" placeholder="Card #">
        </div>
        <div class="three wide field">
          <label>CVC</label>
          <input type="text" name="card[cvc]" maxlength="3" placeholder="CVC">
        </div>
        <div class="six wide field">
          <label>Expiration</label>
          <div class="two fields">
            <div class="field">
              <select class="ui fluid search dropdown" name="card[expire-month]">
                <option value="">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>
            </div>
            <div class="field">
              <input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">
            </div>
          </div>
        </div>
      </div>

      <h4 class="ui dividing header">Receipt</h4>

      <div class="field">
        <label>Send Receipt To:</label>
        <div class="ui fluid multiple search selection dropdown">
          <input type="hidden" name="receipt">
          <i class="dropdown icon"></i>
          <div class="default text">Saved Contacts</div>
          <div class="menu">
            <div class="item" data-value="jenny" data-text="Jenny">
              <img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
              Jenny Hess
            </div>
            <div class="item" data-value="elliot" data-text="Elliot">
              <img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
              Elliot Fu
            </div>
            <div class="item" data-value="stevie" data-text="Stevie">
              <img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
              Stevie Feliciano
            </div>
            <div class="item" data-value="christian" data-text="Christian">
              <img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
              Christian
            </div>
            <div class="item" data-value="matt" data-text="Matt">
              <img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
              Matt
            </div>
            <div class="item" data-value="justen" data-text="Justen">
              <img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
              Justen Kitsune
            </div>
          </div>
        </div>
      </div>

      <div class="ui segment">
        <div class="field">
          <div class="ui toggle checkbox">
            <input type="checkbox" name="gift">
            <label>Do not include a receipt in the package</label>
          </div>
        </div>
      </div>
      <div class="ui button" tabindex="0">Submit Order</div>
    </div>
  </form>

  <h2 class="ui dividing header">Content</h2>

  <div class="example" data-use-content="true">
    <h4 class="ui header">Field</h4>
    <p>A field is a form element containing a label and an input</p>
    <div class="ui form">
      <div class="field">
        <label>User Input</label>
        <input type="text">
      </div>
    </div>
  </div>

  <div class="example" data-use-content="true">
    <h4 class="ui header">Fields</h4>
    <p>A set of fields can appear grouped together</p>
    <div class="ui ignored positive message">
      Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.
    </div>
    <div class="ui form">
      <div class="fields">
        <div class="field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="field">
          <label>Middle name</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui form">
      <div class="three fields">
        <div class="field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="field">
          <label>Middle name</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui form">
      <div class="inline fields">
        <div class="eight wide field">
          <label>Name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="three wide field">
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="five wide field">
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Text Area</h4>
    <p>A textarea can be used to allow for extended user input.</p>
    <div class="ui ignored info message">
      To specify an approximate text area size use the <code>rows</code> attribute.
    </div>
    <div class="ui form">
      <div class="field">
        <label>Text</label>
        <textarea></textarea>
      </div>
      <div class="field">
        <label>Short Text</label>
        <textarea rows="2"></textarea>
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Checkbox</h4>
    <p>A form can contain a <a href="/modules/checkbox.html">checkbox</a></p>
    <div class="ui ignored info message">
      UI checkbox are special, styled versions of standard HTML checkboxes.
    </div>
    <div class="evaluated code" data-type="javascript" data-label="true">
    $('.ui.checkbox')
      .checkbox()
    ;
    </div>
    <div class="ui form">
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>Checkbox</label>
        </div>
      </div>
      <div class="inline field">
        <div class="ui slider checkbox">
          <input type="checkbox" />
          <label>Slider</label>
        </div>
        <label></label>
      </div>
      <div class="inline field">
        <div class="ui toggle checkbox">
          <input type="checkbox" />
          <label>Toggle</label>
        </div>
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Radio Checkbox</h4>
    <p>A form can include a <a href="/modules/checkbox.html#radio">radio checkbox</a></p>
    <div class="evaluated code" data-type="javascript" data-label="true">
    $('.ui.radio.checkbox')
      .checkbox()
    ;
    </div>
    <div class="ui form">
      <div class="inline fields">
        <label for="fruit">Select your favorite fruit:</label>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" checked />
            <label>Apples</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Oranges</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Pears</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Grapefruit</label>
          </div>
        </div>
      </div>
      <div class="grouped fields">
        <label for="fruit">Select your second favorite fruit:</label>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" checked />
            <label>Apples</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Oranges</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Pears</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Grapefruit</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="form example" data-use-content="true">
    <h4 class="ui header">Dropdown</h4>
    <p>A form can contain a <a href="/modules/dropdown.html">dropdown</a></p>
    <div class="ui ignored info message">
      Dropdown will automatically convert <code>select</code> elements initialized as dropdowns. For more details check out <a href="/modules/dropdown.html#usage">the dropdown docs</a>
    </div>
    <div class="code" data-type="javascript" data-label="true">
    $('select.dropdown')
      .dropdown()
    ;
    </div>
    <div class="ui form">
      <div class="field">
          <label>Gender</label>
          <div class="ui selection dropdown">
              <input type="hidden" name="gender">
              <i class="dropdown icon"></i>
              <div class="default text">Gender</div>
              <div class="menu">
                  <div class="item" data-value="1">Male</div>
                  <div class="item" data-value="0">Female</div>
              </div>
          </div>
      </div>
    </div>
  </div>
  <div class="another form example">
    <div class="ui form">
      <div class="field">
        <label>Country</label>
        <select class="ui search dropdown">
          <option value="">Select Country</option>
          <option value="AF">Afghanistan</option>
          <option value="AX">Åland Islands</option>
          <option value="AL">Albania</option>
          <option value="DZ">Algeria</option>
          <option value="AS">American Samoa</option>
          <option value="AD">Andorra</option>
          <option value="AO">Angola</option>
          <option value="AI">Anguilla</option>
          <option value="AQ">Antarctica</option>
          <option value="AG">Antigua and Barbuda</option>
          <option value="AR">Argentina</option>
          <option value="AM">Armenia</option>
          <option value="AW">Aruba</option>
          <option value="AU">Australia</option>
          <option value="AT">Austria</option>
          <option value="AZ">Azerbaijan</option>
          <option value="BS">Bahamas</option>
          <option value="BH">Bahrain</option>
          <option value="BD">Bangladesh</option>
          <option value="BB">Barbados</option>
          <option value="BY">Belarus</option>
          <option value="BE">Belgium</option>
          <option value="BZ">Belize</option>
          <option value="BJ">Benin</option>
          <option value="BM">Bermuda</option>
          <option value="BT">Bhutan</option>
          <option value="BO">Bolivia, Plurinational State of</option>
          <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
          <option value="BA">Bosnia and Herzegovina</option>
          <option value="BW">Botswana</option>
          <option value="BV">Bouvet Island</option>
          <option value="BR">Brazil</option>
          <option value="IO">British Indian Ocean Territory</option>
          <option value="BN">Brunei Darussalam</option>
          <option value="BG">Bulgaria</option>
          <option value="BF">Burkina Faso</option>
          <option value="BI">Burundi</option>
          <option value="KH">Cambodia</option>
          <option value="CM">Cameroon</option>
          <option value="CA">Canada</option>
          <option value="CV">Cape Verde</option>
          <option value="KY">Cayman Islands</option>
          <option value="CF">Central African Republic</option>
          <option value="TD">Chad</option>
          <option value="CL">Chile</option>
          <option value="CN">China</option>
          <option value="CX">Christmas Island</option>
          <option value="CC">Cocos (Keeling) Islands</option>
          <option value="CO">Colombia</option>
          <option value="KM">Comoros</option>
          <option value="CG">Congo</option>
          <option value="CD">Congo, the Democratic Republic of the</option>
          <option value="CK">Cook Islands</option>
          <option value="CR">Costa Rica</option>
          <option value="CI">Côte d'Ivoire</option>
          <option value="HR">Croatia</option>
          <option value="CU">Cuba</option>
          <option value="CW">Curaçao</option>
          <option value="CY">Cyprus</option>
          <option value="CZ">Czech Republic</option>
          <option value="DK">Denmark</option>
          <option value="DJ">Djibouti</option>
          <option value="DM">Dominica</option>
          <option value="DO">Dominican Republic</option>
          <option value="EC">Ecuador</option>
          <option value="EG">Egypt</option>
          <option value="SV">El Salvador</option>
          <option value="GQ">Equatorial Guinea</option>
          <option value="ER">Eritrea</option>
          <option value="EE">Estonia</option>
          <option value="ET">Ethiopia</option>
          <option value="FK">Falkland Islands (Malvinas)</option>
          <option value="FO">Faroe Islands</option>
          <option value="FJ">Fiji</option>
          <option value="FI">Finland</option>
          <option value="FR">France</option>
          <option value="GF">French Guiana</option>
          <option value="PF">French Polynesia</option>
          <option value="TF">French Southern Territories</option>
          <option value="GA">Gabon</option>
          <option value="GM">Gambia</option>
          <option value="GE">Georgia</option>
          <option value="DE">Germany</option>
          <option value="GH">Ghana</option>
          <option value="GI">Gibraltar</option>
          <option value="GR">Greece</option>
          <option value="GL">Greenland</option>
          <option value="GD">Grenada</option>
          <option value="GP">Guadeloupe</option>
          <option value="GU">Guam</option>
          <option value="GT">Guatemala</option>
          <option value="GG">Guernsey</option>
          <option value="GN">Guinea</option>
          <option value="GW">Guinea-Bissau</option>
          <option value="GY">Guyana</option>
          <option value="HT">Haiti</option>
          <option value="HM">Heard Island and McDonald Islands</option>
          <option value="VA">Holy See (Vatican City State)</option>
          <option value="HN">Honduras</option>
          <option value="HK">Hong Kong</option>
          <option value="HU">Hungary</option>
          <option value="IS">Iceland</option>
          <option value="IN">India</option>
          <option value="ID">Indonesia</option>
          <option value="IR">Iran, Islamic Republic of</option>
          <option value="IQ">Iraq</option>
          <option value="IE">Ireland</option>
          <option value="IM">Isle of Man</option>
          <option value="IL">Israel</option>
          <option value="IT">Italy</option>
          <option value="JM">Jamaica</option>
          <option value="JP">Japan</option>
          <option value="JE">Jersey</option>
          <option value="JO">Jordan</option>
          <option value="KZ">Kazakhstan</option>
          <option value="KE">Kenya</option>
          <option value="KI">Kiribati</option>
          <option value="KP">Korea, Democratic People's Republic of</option>
          <option value="KR">Korea, Republic of</option>
          <option value="KW">Kuwait</option>
          <option value="KG">Kyrgyzstan</option>
          <option value="LA">Lao People's Democratic Republic</option>
          <option value="LV">Latvia</option>
          <option value="LB">Lebanon</option>
          <option value="LS">Lesotho</option>
          <option value="LR">Liberia</option>
          <option value="LY">Libya</option>
          <option value="LI">Liechtenstein</option>
          <option value="LT">Lithuania</option>
          <option value="LU">Luxembourg</option>
          <option value="MO">Macao</option>
          <option value="MK">Macedonia, the former Yugoslav Republic of</option>
          <option value="MG">Madagascar</option>
          <option value="MW">Malawi</option>
          <option value="MY">Malaysia</option>
          <option value="MV">Maldives</option>
          <option value="ML">Mali</option>
          <option value="MT">Malta</option>
          <option value="MH">Marshall Islands</option>
          <option value="MQ">Martinique</option>
          <option value="MR">Mauritania</option>
          <option value="MU">Mauritius</option>
          <option value="YT">Mayotte</option>
          <option value="MX">Mexico</option>
          <option value="FM">Micronesia, Federated States of</option>
          <option value="MD">Moldova, Republic of</option>
          <option value="MC">Monaco</option>
          <option value="MN">Mongolia</option>
          <option value="ME">Montenegro</option>
          <option value="MS">Montserrat</option>
          <option value="MA">Morocco</option>
          <option value="MZ">Mozambique</option>
          <option value="MM">Myanmar</option>
          <option value="NA">Namibia</option>
          <option value="NR">Nauru</option>
          <option value="NP">Nepal</option>
          <option value="NL">Netherlands</option>
          <option value="NC">New Caledonia</option>
          <option value="NZ">New Zealand</option>
          <option value="NI">Nicaragua</option>
          <option value="NE">Niger</option>
          <option value="NG">Nigeria</option>
          <option value="NU">Niue</option>
          <option value="NF">Norfolk Island</option>
          <option value="MP">Northern Mariana Islands</option>
          <option value="NO">Norway</option>
          <option value="OM">Oman</option>
          <option value="PK">Pakistan</option>
          <option value="PW">Palau</option>
          <option value="PS">Palestinian Territory, Occupied</option>
          <option value="PA">Panama</option>
          <option value="PG">Papua New Guinea</option>
          <option value="PY">Paraguay</option>
          <option value="PE">Peru</option>
          <option value="PH">Philippines</option>
          <option value="PN">Pitcairn</option>
          <option value="PL">Poland</option>
          <option value="PT">Portugal</option>
          <option value="PR">Puerto Rico</option>
          <option value="QA">Qatar</option>
          <option value="RE">Réunion</option>
          <option value="RO">Romania</option>
          <option value="RU">Russian Federation</option>
          <option value="RW">Rwanda</option>
          <option value="BL">Saint Barthélemy</option>
          <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
          <option value="KN">Saint Kitts and Nevis</option>
          <option value="LC">Saint Lucia</option>
          <option value="MF">Saint Martin (French part)</option>
          <option value="PM">Saint Pierre and Miquelon</option>
          <option value="VC">Saint Vincent and the Grenadines</option>
          <option value="WS">Samoa</option>
          <option value="SM">San Marino</option>
          <option value="ST">Sao Tome and Principe</option>
          <option value="SA">Saudi Arabia</option>
          <option value="SN">Senegal</option>
          <option value="RS">Serbia</option>
          <option value="SC">Seychelles</option>
          <option value="SL">Sierra Leone</option>
          <option value="SG">Singapore</option>
          <option value="SX">Sint Maarten (Dutch part)</option>
          <option value="SK">Slovakia</option>
          <option value="SI">Slovenia</option>
          <option value="SB">Solomon Islands</option>
          <option value="SO">Somalia</option>
          <option value="ZA">South Africa</option>
          <option value="GS">South Georgia and the South Sandwich Islands</option>
          <option value="SS">South Sudan</option>
          <option value="ES">Spain</option>
          <option value="LK">Sri Lanka</option>
          <option value="SD">Sudan</option>
          <option value="SR">Suriname</option>
          <option value="SJ">Svalbard and Jan Mayen</option>
          <option value="SZ">Swaziland</option>
          <option value="SE">Sweden</option>
          <option value="CH">Switzerland</option>
          <option value="SY">Syrian Arab Republic</option>
          <option value="TW">Taiwan, Province of China</option>
          <option value="TJ">Tajikistan</option>
          <option value="TZ">Tanzania, United Republic of</option>
          <option value="TH">Thailand</option>
          <option value="TL">Timor-Leste</option>
          <option value="TG">Togo</option>
          <option value="TK">Tokelau</option>
          <option value="TO">Tonga</option>
          <option value="TT">Trinidad and Tobago</option>
          <option value="TN">Tunisia</option>
          <option value="TR">Turkey</option>
          <option value="TM">Turkmenistan</option>
          <option value="TC">Turks and Caicos Islands</option>
          <option value="TV">Tuvalu</option>
          <option value="UG">Uganda</option>
          <option value="UA">Ukraine</option>
          <option value="AE">United Arab Emirates</option>
          <option value="GB">United Kingdom</option>
          <option value="US">United States</option>
          <option value="UM">United States Minor Outlying Islands</option>
          <option value="UY">Uruguay</option>
          <option value="UZ">Uzbekistan</option>
          <option value="VU">Vanuatu</option>
          <option value="VE">Venezuela, Bolivarian Republic of</option>
          <option value="VN">Viet Nam</option>
          <option value="VG">Virgin Islands, British</option>
          <option value="VI">Virgin Islands, U.S.</option>
          <option value="WF">Wallis and Futuna</option>
          <option value="EH">Western Sahara</option>
          <option value="YE">Yemen</option>
          <option value="ZM">Zambia</option>
          <option value="ZW">Zimbabwe</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form example" data-tag="select" data-use-content="true">
    <h4 class="ui header">Multiple Select</h4>
    <p>A <a href="/modules/dropdown.html##multiple-selection">multiple select</a> is used to include several choices with one form field</p>
    <div class="ui form">
      <div class="field">
        <label>Country</label>
        <select multiple class="ui dropdown">
          <option value="">Select Country</option>
          <option value="AF">Afghanistan</option>
          <option value="AX">Åland Islands</option>
          <option value="AL">Albania</option>
          <option value="DZ">Algeria</option>
          <option value="AS">American Samoa</option>
          <option value="AD">Andorra</option>
          <option value="AO">Angola</option>
          <option value="AI">Anguilla</option>
          <option value="AQ">Antarctica</option>
          <option value="AG">Antigua and Barbuda</option>
          <option value="AR">Argentina</option>
          <option value="AM">Armenia</option>
          <option value="AW">Aruba</option>
          <option value="AU">Australia</option>
          <option value="AT">Austria</option>
          <option value="AZ">Azerbaijan</option>
          <option value="BS">Bahamas</option>
          <option value="BH">Bahrain</option>
          <option value="BD">Bangladesh</option>
          <option value="BB">Barbados</option>
          <option value="BY">Belarus</option>
          <option value="BE">Belgium</option>
          <option value="BZ">Belize</option>
          <option value="BJ">Benin</option>
          <option value="BM">Bermuda</option>
          <option value="BT">Bhutan</option>
          <option value="BO">Bolivia, Plurinational State of</option>
          <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
          <option value="BA">Bosnia and Herzegovina</option>
          <option value="BW">Botswana</option>
          <option value="BV">Bouvet Island</option>
          <option value="BR">Brazil</option>
          <option value="IO">British Indian Ocean Territory</option>
          <option value="BN">Brunei Darussalam</option>
          <option value="BG">Bulgaria</option>
          <option value="BF">Burkina Faso</option>
          <option value="BI">Burundi</option>
          <option value="KH">Cambodia</option>
          <option value="CM">Cameroon</option>
          <option value="CA">Canada</option>
          <option value="CV">Cape Verde</option>
          <option value="KY">Cayman Islands</option>
          <option value="CF">Central African Republic</option>
          <option value="TD">Chad</option>
          <option value="CL">Chile</option>
          <option value="CN">China</option>
          <option value="CX">Christmas Island</option>
          <option value="CC">Cocos (Keeling) Islands</option>
          <option value="CO">Colombia</option>
          <option value="KM">Comoros</option>
          <option value="CG">Congo</option>
          <option value="CD">Congo, the Democratic Republic of the</option>
          <option value="CK">Cook Islands</option>
          <option value="CR">Costa Rica</option>
          <option value="CI">Côte d'Ivoire</option>
          <option value="HR">Croatia</option>
          <option value="CU">Cuba</option>
          <option value="CW">Curaçao</option>
          <option value="CY">Cyprus</option>
          <option value="CZ">Czech Republic</option>
          <option value="DK">Denmark</option>
          <option value="DJ">Djibouti</option>
          <option value="DM">Dominica</option>
          <option value="DO">Dominican Republic</option>
          <option value="EC">Ecuador</option>
          <option value="EG">Egypt</option>
          <option value="SV">El Salvador</option>
          <option value="GQ">Equatorial Guinea</option>
          <option value="ER">Eritrea</option>
          <option value="EE">Estonia</option>
          <option value="ET">Ethiopia</option>
          <option value="FK">Falkland Islands (Malvinas)</option>
          <option value="FO">Faroe Islands</option>
          <option value="FJ">Fiji</option>
          <option value="FI">Finland</option>
          <option value="FR">France</option>
          <option value="GF">French Guiana</option>
          <option value="PF">French Polynesia</option>
          <option value="TF">French Southern Territories</option>
          <option value="GA">Gabon</option>
          <option value="GM">Gambia</option>
          <option value="GE">Georgia</option>
          <option value="DE">Germany</option>
          <option value="GH">Ghana</option>
          <option value="GI">Gibraltar</option>
          <option value="GR">Greece</option>
          <option value="GL">Greenland</option>
          <option value="GD">Grenada</option>
          <option value="GP">Guadeloupe</option>
          <option value="GU">Guam</option>
          <option value="GT">Guatemala</option>
          <option value="GG">Guernsey</option>
          <option value="GN">Guinea</option>
          <option value="GW">Guinea-Bissau</option>
          <option value="GY">Guyana</option>
          <option value="HT">Haiti</option>
          <option value="HM">Heard Island and McDonald Islands</option>
          <option value="VA">Holy See (Vatican City State)</option>
          <option value="HN">Honduras</option>
          <option value="HK">Hong Kong</option>
          <option value="HU">Hungary</option>
          <option value="IS">Iceland</option>
          <option value="IN">India</option>
          <option value="ID">Indonesia</option>
          <option value="IR">Iran, Islamic Republic of</option>
          <option value="IQ">Iraq</option>
          <option value="IE">Ireland</option>
          <option value="IM">Isle of Man</option>
          <option value="IL">Israel</option>
          <option value="IT">Italy</option>
          <option value="JM">Jamaica</option>
          <option value="JP">Japan</option>
          <option value="JE">Jersey</option>
          <option value="JO">Jordan</option>
          <option value="KZ">Kazakhstan</option>
          <option value="KE">Kenya</option>
          <option value="KI">Kiribati</option>
          <option value="KP">Korea, Democratic People's Republic of</option>
          <option value="KR">Korea, Republic of</option>
          <option value="KW">Kuwait</option>
          <option value="KG">Kyrgyzstan</option>
          <option value="LA">Lao People's Democratic Republic</option>
          <option value="LV">Latvia</option>
          <option value="LB">Lebanon</option>
          <option value="LS">Lesotho</option>
          <option value="LR">Liberia</option>
          <option value="LY">Libya</option>
          <option value="LI">Liechtenstein</option>
          <option value="LT">Lithuania</option>
          <option value="LU">Luxembourg</option>
          <option value="MO">Macao</option>
          <option value="MK">Macedonia, the former Yugoslav Republic of</option>
          <option value="MG">Madagascar</option>
          <option value="MW">Malawi</option>
          <option value="MY">Malaysia</option>
          <option value="MV">Maldives</option>
          <option value="ML">Mali</option>
          <option value="MT">Malta</option>
          <option value="MH">Marshall Islands</option>
          <option value="MQ">Martinique</option>
          <option value="MR">Mauritania</option>
          <option value="MU">Mauritius</option>
          <option value="YT">Mayotte</option>
          <option value="MX">Mexico</option>
          <option value="FM">Micronesia, Federated States of</option>
          <option value="MD">Moldova, Republic of</option>
          <option value="MC">Monaco</option>
          <option value="MN">Mongolia</option>
          <option value="ME">Montenegro</option>
          <option value="MS">Montserrat</option>
          <option value="MA">Morocco</option>
          <option value="MZ">Mozambique</option>
          <option value="MM">Myanmar</option>
          <option value="NA">Namibia</option>
          <option value="NR">Nauru</option>
          <option value="NP">Nepal</option>
          <option value="NL">Netherlands</option>
          <option value="NC">New Caledonia</option>
          <option value="NZ">New Zealand</option>
          <option value="NI">Nicaragua</option>
          <option value="NE">Niger</option>
          <option value="NG">Nigeria</option>
          <option value="NU">Niue</option>
          <option value="NF">Norfolk Island</option>
          <option value="MP">Northern Mariana Islands</option>
          <option value="NO">Norway</option>
          <option value="OM">Oman</option>
          <option value="PK">Pakistan</option>
          <option value="PW">Palau</option>
          <option value="PS">Palestinian Territory, Occupied</option>
          <option value="PA">Panama</option>
          <option value="PG">Papua New Guinea</option>
          <option value="PY">Paraguay</option>
          <option value="PE">Peru</option>
          <option value="PH">Philippines</option>
          <option value="PN">Pitcairn</option>
          <option value="PL">Poland</option>
          <option value="PT">Portugal</option>
          <option value="PR">Puerto Rico</option>
          <option value="QA">Qatar</option>
          <option value="RE">Réunion</option>
          <option value="RO">Romania</option>
          <option value="RU">Russian Federation</option>
          <option value="RW">Rwanda</option>
          <option value="BL">Saint Barthélemy</option>
          <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
          <option value="KN">Saint Kitts and Nevis</option>
          <option value="LC">Saint Lucia</option>
          <option value="MF">Saint Martin (French part)</option>
          <option value="PM">Saint Pierre and Miquelon</option>
          <option value="VC">Saint Vincent and the Grenadines</option>
          <option value="WS">Samoa</option>
          <option value="SM">San Marino</option>
          <option value="ST">Sao Tome and Principe</option>
          <option value="SA">Saudi Arabia</option>
          <option value="SN">Senegal</option>
          <option value="RS">Serbia</option>
          <option value="SC">Seychelles</option>
          <option value="SL">Sierra Leone</option>
          <option value="SG">Singapore</option>
          <option value="SX">Sint Maarten (Dutch part)</option>
          <option value="SK">Slovakia</option>
          <option value="SI">Slovenia</option>
          <option value="SB">Solomon Islands</option>
          <option value="SO">Somalia</option>
          <option value="ZA">South Africa</option>
          <option value="GS">South Georgia and the South Sandwich Islands</option>
          <option value="SS">South Sudan</option>
          <option value="ES">Spain</option>
          <option value="LK">Sri Lanka</option>
          <option value="SD">Sudan</option>
          <option value="SR">Suriname</option>
          <option value="SJ">Svalbard and Jan Mayen</option>
          <option value="SZ">Swaziland</option>
          <option value="SE">Sweden</option>
          <option value="CH">Switzerland</option>
          <option value="SY">Syrian Arab Republic</option>
          <option value="TW">Taiwan, Province of China</option>
          <option value="TJ">Tajikistan</option>
          <option value="TZ">Tanzania, United Republic of</option>
          <option value="TH">Thailand</option>
          <option value="TL">Timor-Leste</option>
          <option value="TG">Togo</option>
          <option value="TK">Tokelau</option>
          <option value="TO">Tonga</option>
          <option value="TT">Trinidad and Tobago</option>
          <option value="TN">Tunisia</option>
          <option value="TR">Turkey</option>
          <option value="TM">Turkmenistan</option>
          <option value="TC">Turks and Caicos Islands</option>
          <option value="TV">Tuvalu</option>
          <option value="UG">Uganda</option>
          <option value="UA">Ukraine</option>
          <option value="AE">United Arab Emirates</option>
          <option value="GB">United Kingdom</option>
          <option value="US">United States</option>
          <option value="UM">United States Minor Outlying Islands</option>
          <option value="UY">Uruguay</option>
          <option value="UZ">Uzbekistan</option>
          <option value="VU">Vanuatu</option>
          <option value="VE">Venezuela, Bolivarian Republic of</option>
          <option value="VN">Viet Nam</option>
          <option value="VG">Virgin Islands, British</option>
          <option value="VI">Virgin Islands, U.S.</option>
          <option value="WF">Wallis and Futuna</option>
          <option value="EH">Western Sahara</option>
          <option value="YE">Yemen</option>
          <option value="ZM">Zambia</option>
          <option value="ZW">Zimbabwe</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form example" data-tag="select" data-use-content="true">
    <h4 class="ui header">HTML Select</h4>
    <p>If Javascript or <a href="/modules/dropdown.html">ui dropdown</a> are not a viable option, forms also can provide basic styling for select elements</p>
    <div class="ui form">
      <div class="field">
        <select>
          <option value="">Gender</option>
          <option value="1">Male</option>
          <option value="0">Female</option>
        </select>
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example" data-use-content="true">
    <h4 class="ui header">Message</h4>
    <p>A form can contain a <a href="/collections/message.html">message</a></p>
    <div class="ui ignored info message">
      Any <code>info</code>, <code>error</code>, <code>success</code>, or <code>warning</code> message blocks found inside a form are hidden by default.
    </div>
    <div class="ui form">
      <div class="ui message">
        <div class="header">We had some issues</div>
        <ul class="list">
          <li>Please enter your first name</li>
          <li>Please enter your last name</li>
        </ul>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Loading</h4>
    <p>If a form is in loading state, it will automatically show a loading indicator.</p>

    <div class="ui loading form">
      <div class="field">
        <label>E-mail</label>
        <input type="email" placeholder="joe@schmoe.com">
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Success</h4>
    <p>If a form is in an success state, it will automatically show any success message blocks.</p>
    <div class="ui form success">
      <div class="field">
        <label>E-mail</label>
        <input type="email" placeholder="joe@schmoe.com">
      </div>
      <div class="ui success message">
        <div class="header">Form Completed</div>
        <p>You're all signed up for the newsletter.</p>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Error</h4>
    <p>If a form is in an error state, it will automatically show any error message blocks.</p>
    <div class="ui form error">
      <div class="field">
        <label>E-mail</label>
        <input type="email" placeholder="joe@schmoe.com">
      </div>
      <div class="ui error message">
        <div class="header">Action Forbidden</div>
        <p>You can only sign up for an account once with a given e-mail address.</p>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Warning</h4>
    <p>If a form is in warning state, it will automatically show any warning message block.</p>

    <div class="ui form warning">
      <div class="field">
        <label>E-mail</label>
        <input type="email" placeholder="joe@schmoe.com">
      </div>
      <div class="ui warning message">
        <div class="header">Could you check something!</div>
        <ul class="list">
          <li>That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.</li>
        </ul>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>


  <div data-use-content="true" class="example">
    <h4 class="ui header">Field Error</h4>
    <p>Individual fields may display an error state</p>

    <div class="ui form">
      <div class="two fields">
        <div class="field error">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="field error">
        <label>Gender</label>
        <div class="ui selection dropdown">
          <div class="default text">Select</div>
          <i class="dropdown icon"></i>
          <input type="hidden" name="gender">
          <div class="menu">
            <div class="item" data-value="male">Male</div>
            <div class="item" data-value="female">Female</div>
          </div>
        </div>
      </div>
      <div class="inline field error">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>I agree to the Terms and Conditions</label>
        </div>
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Disabled Field</h4>
    <p>Individual fields may be disabled</p>

    <div class="ui form">
      <div class="two fields">
        <div class="disabled field">
          <label>First Name</label>
          <input placeholder="Read Only" type="text" disabled tabindex="-1">
        </div>
        <div class="disabled field">
          <label>Last Name</label>
          <input placeholder="Disabled" type="text" disabled tabindex="-1">
        </div>
      </div>
    </div>
  </div>
  <div data-use-content="true" class="example">
    <h4 class="ui header">Read-Only Field</h4>
    <p>Individual fields may be read only</p>

    <div class="ui form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="Read Only" readonly type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Read Only" readonly type="text">
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Form Variations</h2>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>A form can vary in size</p>
    <div class="ui mini form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui tiny form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui small form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui large form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui big form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui huge form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui massive form">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui submit button">Submit</div>
    </div>
  </div>

  <div class="example" data-use-content="true">
    <h4 class="ui header">Equal Width Form</h4>
    <p>Forms can automatically divide fields to be equal width</p>
    <div class="ui equal width form">
      <div class="fields">
        <div class="field">
          <label>Username</label>
          <input type="text" placeholder="Username">
        </div>
        <div class="field">
          <label>Password</label>
          <input type="password">
        </div>
      </div>
      <div class="fields">
        <div class="field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="field">
          <label>Middle name</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A form on a dark background may have to invert its color scheme</p>

    <div class="ui inverted segment">
      <div class="ui inverted form">
        <div class="two fields">
          <div class="field">
            <label>First Name</label>
            <input placeholder="First Name" type="text">
          </div>
          <div class="field">
            <label>Last Name</label>
            <input placeholder="Last Name" type="text">
          </div>
        </div>
        <div class="inline field">
          <div class="ui checkbox">
            <input type="checkbox" />
            <label>I agree to the terms and conditions</label>
          </div>
        </div>
        <div class="ui submit button">Submit</div>
      </div>
    </div>
  </div>


  <h2 class="ui dividing header">Field Variations</h2>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Inline Field</h4>
    <p>A field can have its label next to instead of above it.</p>
    <div class="ui form">
      <div class="inline field">
        <label>Last name</label>
        <input type="text" placeholder="Full Name">
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example" data-class="wide">
    <h4 class="ui header">Width</h4>
    <p>A field can specify its width in <a href="/collections/grid.html">grid columns</a></p>
    <div class="ui form">
      <div class="fields">
        <div class="six wide field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="four wide field">
          <label>Middle</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="six wide field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
      <div class="fields">
        <div class="two wide field">
          <input type="text" placeholder="2 Wide">
        </div>
        <div class="twelve wide field">
          <input type="text" placeholder="12 Wide">
        </div>
        <div class="two wide field">
          <input type="text" placeholder="2 Wide">
        </div>
      </div>
      <div class="fields">
        <div class="eight wide field">
          <input type="text" placeholder="8 Wide">
        </div>
        <div class="six wide field">
          <input type="text" placeholder="6 Wide">
        </div>
        <div class="two wide field">
          <input type="text" placeholder="2 Wide">
        </div>
      </div>
    </div>
  </div>

  <div data-use-content="true" class="example">
    <h4 class="ui header">Required</h4>
    <p>A field can show that input is mandatory</p>
    <div class="ui form">
        <div class="required field">
          <label>Last name</label>
          <input type="text" placeholder="Full Name">
        </div>
        <div class="required inline field">
          <div class="ui checkbox">
            <input type="checkbox" />
            <label>I agree to the terms and conditions</label>
          </div>
        </div>
    </div>
  </div>

  <h2 class="ui dividing header">Group Variations</h2>

  <div class="example" data-use-content="true">
    <h4 class="ui header">Evenly Divided</h4>
    <p>Fields can have their widths divided evenly</p>
    <div class="ui form">
      <div class="three fields">
        <div class="field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="field">
          <label>Middle name</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>

  <div class="example" data-use-content="true">
    <h4 class="ui header">Grouped Fields</h4>
    <p>Fields can show related choices</p>
    <div class="ui form">
      <div class="grouped fields">
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Apples</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Oranges</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Pears</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Grapefruit</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example" data-use-content="true">
    <h4 class="ui header">Equal Width Fields</h4>
    <p>Fields can automatically divide fields to be equal width</p>
    <div class="ui form">
      <div class="fields">
        <div class="field">
          <label>Username</label>
          <input type="text" placeholder="Username">
        </div>
        <div class="field">
          <label>Password</label>
          <input type="password">
        </div>
      </div>
      <div class="equal width fields">
        <div class="field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="field">
          <label>Middle name</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>


  <div class="example" data-use-content="true">
    <h4 class="ui header">Inline Fields</h4>
    <p>Multiple fields may be inline in a row</p>
    <div class="ui form">
      <div class="inline fields">
        <label>Phone Number</label>
        <div class="field">
          <input type="text" placeholder="(xxx)">
        </div>
        <div class="field">
          <input type="text" placeholder="xxx">
        </div>
        <div class="field">
          <input type="text" placeholder="xxxx">
        </div>
      </div>
    </div>
  </div>

  <div class="another example" data-use-content="true">
    <div class="ui form">
      <div class="inline fields">
        <label>What's your favorite fruit?</label>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Apples</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Oranges</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Pears</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Grapefruit</label>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
